#{extends 'tags/layouts/secure.html' /}
#{set title:'Home' /}

<!-- begin login -->
<div class="login login-v2 animated flipInX" data-pageload-addclass="animated flipInX">
    <!-- begin brand -->
    <div class="login-header">
        <div class="brand">
            <span class="logo"></span> Smart Traffic
            <small>Open Street Map</small>
        </div>
        <div class="icon">
            <i class="fa fa-sign-in"></i>
        </div>
    </div>
    <!-- end brand -->
    <div class="login-content">
	    #{form @authenticate()}
	        #{if flash.error}
	            <p class="error">
	                &{flash.error}
	            </p>
	        #{/if}
	        #{if flash.success}
	            <p class="success">
	                &{flash.success}
	            </p>
	        #{/if}
            <div class="form-group m-b-20">
                <input type="text" name="username" id="username" value="${flash.username}" class="form-control input-lg" placeholder="Account"/>
            </div>
            <div class="form-group m-b-20">
                <input type="password" name="password" id="password" value="" class="form-control input-lg" placeholder="Password" />    
            </div>
            <div class="login-buttons">
                <button type="submit" class="btn btn-success btn-block btn-lg">Sign me in</button>
            </div>
        #{/form}
    </div>
</div>
<!-- end login -->